<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/reginset.css">
</head>

<body>
    <h1><img src="./images/phonepic/login.jpg" alt=""></h1>
    <div class="right">
        <div class="top">
            <h1><img src="./images/logo.jpg" alt="">
            </h1>
            <p>小米账号</p>
            <ul class="nav">
                <li>用户协议</li>
                <li>隐私政策</li>
                <li>帮助中心</li>
                <li>中文简体</li>
            </ul>
        </div>
        <!-- login -->
        <div class="login">
            <!-- 登陆注册切换 -->
            <div class="login-top">
                <a href="./login.html" class="one">登录</a>
                <a href="#" class="two">注册</a>
                <h1><img src="./images/phonepic/code_03.png" alt=""></h1>
            </div>
            <!-- 登录验证 -->
            <input id="username" type="text" placeholder="账号:数字，字母下划线，但不能以数字开头" />
            <span id="showUser"></span><br />
            <input id="userpass" type="password" placeholder="密码:必须是数字，6-16" />
            <span id="showPass"></span><br />
            <input id="btnReg" type="button" value="注册" class="last" />
            <div id="messageBox">

            </div>
            <input type="checkbox" class="xz"
                style="width: 18px;height: 18px;position: absolute;left: 41px;top: 435px;">
            <div class="end-pic"> <i class="success">已阅读并同意小米账号用户协议和用户政策</i>
                <img src="./images/phonepic/login1_03.png" alt="">
            </div>

        </div>
        <!-- 结束 -->
        <p class="end">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
        </p>
    </div>
</body>

</html>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    // $(function(){
    //     $("#btnReg").click(()=>{
    //         $.ajax({
    //             url:"./checkUser.php",
    //             method:"Get",
    //             data:{
    //                 username:$("#username").val(),
    //             }
    //         })
    //     })
    // })
    function isTest() {
        return isUserName() && isPass();
    }

    //1、用户名的前端验证
    function isUserName() {
        //1)、非空判断
        if ($("#username").val() == "") {
            return false;
        }
        //2)、格式判断
        // 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
        let reg = /^[a-zA-Z_]\w{1,9}$/;
        if (!reg.test($("#username").val())) {
            return false;
        }
        return true;
    }


    //2、密码的前端验证
    function isPass() {
        //1)、非空判断
        if ($("#userpass").val() == "") {
            return false;
        }
        //2)、格式判断
        // 数字，6-16位
        let reg = /^\d{6,16}$/;
        if (!reg.test($("#userpass").val())) {
            return false;
        }
        return true;
    }

    //二、后端验证
    let hasUser = false; //该用户名不存在
    function hasUserBack() {
        //后端验证用户名是否存在
        $.get("checkUser.php", {
            "username": $("#username").val()
        }, function (data) {
            if (data == "0") {
                $("#showUser").html("亲，该用户名已经存在，请重新思考！");
                $("#showUser").css({
                    "color": "red"
                });
                hasUser = true;
            } else {
                $("#showUser").html("亲，该用户名可以使用，赶紧注册吧！");
                $("#showUser").css({
                    "color": "green"
                });
                hasUser = false;
            }
        })
    }

    $(function () {
        $("#username").blur(function () {
            //1、前端验证
            if (isUserName() == false) {
                $("#showPass").html("亲，用户名的格式不正确！");
                return;
            }
            //2、后端的验证
            hasUserBack();
        });

        $("#userpass").blur(function () {
            //1、前端验证
            if (isPass() == false) {
                $("#showPass").html("亲，密码格式不正确	！");
                return;
            } else {
                $("#showPass").html("√");
            }
        });

        $("#btnReg").click(function () {
            //1、前端验证
            if (isTest() == false) {
                $("#messageBox").html("亲，您的信息输入不全");
                return;
            }
            //2、用户名是否存在(后端验证)
            if (hasUser) {
                return;
            }

            $.post(
                "addUser.php", {
                    "username": $("#username").val(),
                    "userpass": $("#userpass").val()
                },
                function (data) {
                    if (data == "success") {
                        $("#messageBox").css({
                            "color": "green"
                        });
                        $("#messageBox").html("恭喜您，注册成功！2秒后跳转到<a href='login.html'>登录</a>页面");
                        setTimeout(() => {
                            location.href = "login.html";
                        }, 2000);
                    } else if (data == "fail") {
                        $("#messageBox").css({
                            "color": "red"
                        });
                        $("#messageBox").html("不好意思，注册失败!");
                    } else {
                        $("#messageBox").css({
                            "color": "red"
                        });
                        $("#messageBox").html("不好意思，服务器出问题了!");
                    }
                }
            );
        });
    });
</script>